<template>
  <div class="shopcart" ref="shopcart">
    <ul class="cartList" v-if="list.length">
      <li v-for="(item,index) of list" :key="index">
        <div class="cartListT">
          <div class="store">{{index+1}} {{item.bsc}}</div>
          <div class="coupon" @click="getCoupon">领取优惠券<i class="iconfont icon-more"></i></div>
        </div>
        <div class="cartListC">
          <input type="checkbox" class="checkItem" :data-num="index" ref="checkInput" @click="checkItem($event,index)">
          <img class="img" :src="item.imgUrl" alt="">
          <div class="info">
            <div class="tit">{{item.name}}</div>
            <div class="guige">规格：{{item.guige}}</div>
            <div class="price">￥{{item.price}}</div>
          </div>
          <div class="caozuo">
            <i class="iconfont icon-delete" @click="remove(index)"></i>
            <div class="num">
              <i class="iconfont icon-subtract" @click="reduceCount(index)" :disabled="item.count===1"></i>
              <span>{{item.count}}</span>
              <i class="iconfont icon-add" @click="addCount(index)"></i>
            </div>            
          </div>
        </div>
      </li>
    </ul>
    <div class="nogoods" v-else>购物车内暂时没有商品</div>
    <div class="jiesuan border-top">
      <div class="jiesuanL">
        <input type="checkbox" class="checkAll" id="checkAll" @click="checkAllOrNot($event)">
        <label for="checkAll">全选</label>
      </div>
      <div class="jiesuanR">
        <div class="jiesuanPrice">金额：<span>￥{{totalPrice}}</span></div>
        <div class="jiesuanBtn">结算</div>
      </div>
    </div>


    <!-- <div class="shopcartList" v-if="list.length">
      <table>
        <thead>
        <tr>
          <th><input id="checkAll" type="checkbox" class="checkAll" @click="checkAllOrNot($event)"></th>
          <th>序号</th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list">
          <td><input type="checkbox" class="checkItem" :data-num="index" ref="checkInput" @click="checkItem($event,index)"></td>
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>
              <button @click="reduceCount(index)" :disabled="item.count===1">-</button>
              {{item.count}}
              <button @click="addCount(index)">+</button>
          </td>
          <td>
              <button @click="remove(index)">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
      <div>总价：￥{{totalPrice}}</div>
    </div> -->
    
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name:'shopcart',
  data(){
    return {
      list:[{
        id: 0,
        name: '【伊能静微博推荐】美国挪威小鱼Nordic naturals婴儿鱼油DHA+VD3',
        price: 125.00,
        count: 2,
        guige:'瓶',
        imgUrl:'http://img.tepin.hk/images/201510/1444763965890024491.jpg',
        bsc:'杭州保税区十一号仓'
      },{
        id: 1,
        name: '韩国进口九朵云CLOUD9祛斑霜50ml',
        price: 129.00,
        count: 1,
        guige:'瓶',
        imgUrl:'http://img.tepin.hk/HWG-DE/prt/y/j/s/1504232283759686.jpg',
        bsc:'韩国首尔二号仓'
      },{
        id: 2,
        name: '【 澳洲直邮包邮包税3罐 】澳洲 爱他美婴儿配方奶粉金装4段 900g(2岁以上宝宝)新旧包装随机发',
        price: 689.00,
        count: 1,
        guige:'3罐',
        imgUrl:'http://img.tepin.hk/HWG-DE/prt/1/r/s/1533538861583213.jpg',
        bsc:'澳大利亚布里斯班二号仓'
      },{
        id: 3,
        name: 'LG安宝笛 守护爱恋香水美肌 沐浴露 500g 两瓶',
        price: 89.00,
        count: 1,
        guige:'守护爱恋',
        imgUrl:'http://img.tepin.hk/HWG-DE/prt/d/i/e/1526022111779953.jpg',
        bsc:'友阿国内三十九号仓'
      },{
        id: 4,
        name: '韩国Sulwhasoo雪花秀 滋阴中样4件套',
        price: 129.00,
        count: 1,
        guige:'滋阴水15ml+滋阴乳15ml+润燥精华8ml+人参面霜5ml',
        imgUrl:'http://img.tepin.hk/HWG-DE/prt/w/a/s/1528427211861921.jpg',
        bsc:'韩国海外四号仓'
      },{
        id: 5,
        name: 'Estee Lauder /雅诗兰黛 特润修护肌透精华露 小棕瓶 100ml',
        price: 1340.00,
        count: 1,
        guige:'100ml',
        imgUrl:'http://img.tepin.hk/HWG-DE/prt/m/2/b/1510299169845321.jpg',
        bsc:'香港二十四号仓'
      },{
        id: 6,
        name: '【新西兰直邮  3支装】红印Red Seal天然草本加钙牙膏 防止牙菌斑 110g',
        price: 109.00,
        count: 1,
        guige:'3支',
        imgUrl:'http://img.tepin.hk/HWG-DE/prt/4/8/5/1533102011294278.jpg',
        bsc:'新西兰奥克兰海外仓'
      }],
      checkList:[]
    }
  },
  components:{
      
  },
  props:{
       
  },
  created(){
    this.creatScroll()
  },
  mounted(){
    //默认全选
    //this.checkAll();
    //this.checkAllElement(document.querySelector(".checkAll"));
  },
  methods:{
    handleChange(value){
      console.log(value)
    },
    creatScroll(){
      this.$nextTick(() => {
        if(!this.scroll){
          this.scroll=new BScroll(this.$refs.shopcart,{scrollX: false,scrollY: true,click:true})
        }else{
          this.scroll.refresh()
        }
      })
    },
    /**
         * 减少购买数量
         * @param index
         */
    reduceCount: function (index) {
        if (this.list[index].count === 1) return;
        this.list[index].count--;
    },
    /**
     * 增加购买数量
     * @param index
     */
    addCount: function (index) {
        this.list[index].count++;
    },
    /**
     * 移除商品
     * @param index
     */
    remove: function (index) {
        console.log("remove-index:" + index);
        this.list.splice(index, 1);

        //获取商品序号
        var id = index + 1;
        //移除实际参与计算的商品
        var $checkList = this.checkList;
        for (var i = 0; i < $checkList.length; i++) {
            var item = $checkList[i];
            if (item.id == id) {
                $checkList.splice(i, 1);
            }
        }
    },
    /**
     * 全选或全不选
     * @param event
     */
    checkAllOrNot: function (event) {
      console.log(event.target.checked)
        if (event.target.checked) {//全选
            this.checkAll();
            console.log("checkList：" + this.checkList);
        } else { // 全不选
            console.log("全不选");
            this.checkInItems('noCheckAll');
            this.checkList.splice(0);//清空数组
        }
    },
    /**
     * 全选
     */
    checkAll: function () {
        console.log("全选");
        this.checkInItems('checkAll');
        this.checkList = this.list.concat();//复制商品列表
    },
    /**
     * 全选或全不选
     * @param type checkAll：全选；其他：全不选
     */
    checkInItems: function (type) {
        var items = document.querySelectorAll('.checkItem');
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
          if (type === 'checkAll') {
              item.checked = true;
          } else {
              item.checked = false;
          }
        }
    },
    /**
     * 勾选或不勾选
     */
    checkItem: function (event, index) {
        console.log("checkItem");
        var element = event.target;
        var $allCheck = document.querySelector(".checkAll");
        if (element.checked) {//勾选，加入已选择列表
          this.checkList.push(this.list[index]);
          this.checkAllElement($allCheck);
        } else {//不勾选，从已选择列表中去除
          var idNum=element.getAttribute('data-num')
          console.log(idNum)
          var j
          for(var i=0;i<this.checkList.length;i++){
            if(idNum==this.checkList[i].id){
              j=i
            }
          }
          console.log(j)
          this.checkList.splice(j,1);
          $allCheck.checked = false;
        }
    },
    /**
     * 勾选全选框
     * @param element
     */
    checkAllElement: function (element) {
        //如果所有的商品都已被勾选，则勾选全选框
        if (this.checkList.length == this.list.length) {
            element.checked = true;
        }
    },
    getCoupon(){
      //http://m.tepin.hk/shop/coupon/proCouponList.html?singleCode=YYNBH001234
      window.location.href='http://m.tepin.hk/shop/coupon/proCouponList.html?singleCode=YYNBH001234'
    }
  },
  computed:{
    // 总价 @returns {string}
    totalPrice: function () {
        var total = 0;
        for (var i = 0; i < this.checkList.length; i++) {
            var item = this.checkList[i];
            total += item.price * item.count;
        }
        return total.toLocaleString();
    }
  }
}

</script>

<style lang="stylus" scoped>
.shopcart{width:100%;overflow:hidden;background:#f5f5f5;position:absolute;left:0;top:0;right:0;bottom:50px;}
.cartList{width:100%;overflow:hidden;}
.cartList li{width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin-bottom:10px;background:#fff;}
.cartListT{width:100%;padding:0 10px;height:30px;background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
.cartListT .store{font-size:12px;color:#333;}
.cartListT .coupon{color:#ED1946;font-size:12px;}
.cartListT .coupon .iconfont{font-size:12px;}
.cartListC{width:100%;padding:0 10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;box-sizing:border-box;}
.cartListC .input{}
.cartListC input[type="checkbox"]{width:14px;height:14px;display: inline-block;text-align: center;vertical-align: -0.09rem;line-height:14px;position: relative;background: none;border:none;-webkit-appearance:none;}
.cartListC input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: url('../assets/images/checkbox.png') no-repeat;background-size:14px;width: 100%;height: 100%;color: #fff;}
.cartListC input[type="checkbox"]:checked::before{content: "";background: url('../assets/images/checkbox2.png') no-repeat;background-size:14px;position: absolute;top: 0;left: 0;width:100%;color:#fff;font-size: 0.52rem;}
.cartListC input[type="checkbox"]:disabled::before{background: #bbb;cursor: default;border:1px solid #999;box-sizing: border-box;}

.cartListC .img{width:90px;height:90px;}
.cartListC .info{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;/*padding-left:10px;*/box-sizing:border-box;}
.cartListC .info .tit{width:100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;font-size:14px;color:#333;}
.cartListC .info .guige{font-size:12px;color:#999;width:100%;overflow: hidden;margin-top:5px;}
.cartListC .info .price{font-size:14px;color:#ed1946;width:100%;overflow: hidden;margin-top:5px;}
.cartListC .caozuo{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;}
.caozuo .num{width:100%;overflow:hidden;margin-top:30px;}
.caozuo .num .iconfont{display:inline-block;font-size:18px;color:#333;border:1px solid #666;text-align:center;font-size:14px;}
.caozuo .num span{margin-left:5px;margin-right:5px;color:#666;}
.caozuo .icon-delete{}

.jiesuan{width:100%;height:50px;overflow:hidden;display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:fixed;left:0;bottom:0;z-index:2;background:#fff;padding-left:10px;box-sizing:border-box;}
.jiesuanL{display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
.jiesuanL label{margin-left:5px;font-size:14px;color:#666;}
.jiesuanR{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:100%;line-height:100%;}
.jiesuanR .jiesuanPrice{margin-right:10px;color:#666;}
.jiesuanR .jiesuanPrice span{color:#ed1946;display:inline-block;font-size:16px;}
.jiesuanR .jiesuanPrice span:first-letter{font-size:12px;}
.jiesuanR .jiesuanBtn{flex:1;background:#ed1946;color:#fff;font-size:14px;height:100%;line-height:50px;width:100px;text-align:center;}

.nogoods{font-size:12px;text-align:center;color:#999;margin-top:100px;}



</style>